<template>
	<div v-if="formState !== 'hidden'">
		<div class="container">
			<div class="container_title">基础信息</div>
			<div class="container_content">
				<FormItems
					v-model="infoData"
					:form="formList"
					labelWidth="140px"
					:column="3"
					:state="formState"></FormItems>
				<!-- state="readonly" -->
			</div>
		</div>
	</div>
</template>
<script>
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	export default {
		name: 'info',
		props: {
			value: {
				default: {},
			},
			state: {
				default: 'write',
			},
			formStatus: {
				required: false,
			},
		},
		components: { FormItems },
		data() {
			return {
				formList: [],
				dicts: {
					// 收款人类型
					payeeTypeList: [
						{
							label: '员工',
							value: '1',
						},
						{
							label: '司机',
							value: '2',
						},
						{
							label: '供应商',
							value: '3',
						},
					],
					contractTypeList: [
						{
							label: '短租',
							value: '1',
						},
						{
							label: '渠道',
							value: '2',
						},
						{
							label: '自营',
							value: '3',
						},
						{
							label: '代收代付',
							value: '4',
						},
					],
					needpayType: [
						{
							label: '是',
							value: '1',
						},
						{
							label: '否',
							value: '2',
						},
					],
					BusinessType: [],
				},
			};
		},

		computed: {
			infoData: {
				get() {
					return this.value;
				},
				set(value) {
					this.$emit('input', value);
				},
			},

			formState: {
				get() {
					let state = 'write';
					if (Reflect.has(this, 'formStatus')) {
						switch (this?.formStatus?.toString()) {
							case '0':
								state = 'write';
								break;
							case '1':
								state = 'disabled';
								break;
							case '2':
								state = 'hidden';
								break;
							default:
								state = this.state;
								break;
						}
					}
					return state;
				},
			},
		},
		watch: {
			infoData: {
				handler(val) {
					// this.formatValue();
				},
				deep: true,
			},
		},
		mounted() {
			this.initInfo();
		},

		methods: {
			formatValue() {
				if (typeof this.infoData.contractType == 'string') {
					let contractType =
						this.infoData?.contractType?.split?.(',') ?? [];
					this.$set(this.infoData, 'contractType', contractType);
				}
			},
			initInfo() {
				this.formList = [
					{
						label: '申请人',
						type: 'input',
						prop: 'applyUserName',
					},
					{
						label: '申请人组织',
						type: 'input',
						prop: 'applyDeptName',
					},
					// {
					//     label: "城市",
					//     type: "input",
					//     prop: "companyId",
					// },
					{
						label: '所属月份',
						type: 'input',
						prop: 'payTime',
					},
					{
						label: '合同',
						type: 'input',
						prop: 'contractType',
						format: row => {
							let word = '-';
							let item = this.dicts.contractTypeList.find(
								item => item.value == row.contractType,
							);
							item && (word = item.label);
							return word;
						},
					},
					{
						label: '申请时间',
						type: 'input',
						prop: 'createTime',
						format: row => {
							return this._formatTime(row?.createTime, 0);
						},
					},
					{
						label: '收款人类型',
						type: 'input',
						prop: 'payeeType',
						format: row => {
							let word = '-';
							let item = this.dicts.payeeTypeList.find(
								item => item.value == row.payeeType,
							);
							item && (word = item.label);
							return word;
						},
					},
					{
						label: '收款人',
						type: 'input',
						prop: 'payeeUserName',
					},
					{
						label: '收款账户开户行名称',
						type: 'input',
						prop: 'paymentAccount',
					},
					{
						label: '收款账号',
						type: 'input',
						prop: 'paymentCardId',
					},
				];
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		border-radius: 10px;
		background-color: #fff;
		// margin: 20px;
		padding: 20px;
		.container_title {
			margin-bottom: 30px;
			border-bottom: 1px solid #e9e9e9;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			padding-bottom: 15px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			line-height: 22px;
			text-align: left;
			font-style: normal;
		}
		.container_content {
			// padding: 2rem;
		}
	}
	.chunk_nav {
		background-color: #fff;
		// padding: 2rem 0;
		.nav_item {
			padding-bottom: 30px;
			display: flex;
			.label {
				min-width: 0;
				width: 250px;
				text-align: right;
				padding-right: 25px;
				box-sizing: border-box;
			}
			.content {
				flex: 1;
				min-width: 0;
				padding-right: 50px;
				.menu {
					width: 100%;
					display: grid;
					grid-template-columns: repeat(6, minmax(0, 1fr));
					gap: 5px 0;
				}
			}
		}
	}
	.chunk_contentBox {
		background-color: #fff;
		// padding: 2.5rem;
		.chunk {
			margin-bottom: 50px;
		}
	}
	NaNpxakeBox {
		display: flex;
		margin-bottom: 20px;
		.label {
			font-size: 14px;
			margin-right: 15px;
		}
		.content {
			width: 370px;
		}
	}
	.handleBox {
		display: flex;
		justify-content: center;
	}
	::v-deep .gridBox {
		padding-top: 0;
	}
	.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
		transform: translateX(100px);
		opacity: 0;
	}

	.component-fade-enter-active,
	.component-fade-leave-active {
		transition: all 0.8s;
	}
</style>
